 

.example-row {
	overflow: hidden;
	margin-bottom: 50px;
}

.example {
	width: 50%;
	float: left;
	padding: 0 30px;
}

ul {
	list-style: none;
}

li {
	background: #e6e6e6;
	padding: 0 10px;
	overflow: hidden;
	margin-bottom: 2px;
	line-height: 2.5;
}

h1,
h2,
h3 {
	font: bold 36px Sans-Serif;
}

h1 {
	padding: 30px;
}

h2 {
	font-size: 24px;
	margin: 0 0 5px 0;
	letter-spacing: -1px;
}

h2 span {
	display: block;
	font-size: 16px;
	color: black !important;
}

h3 {
	font-size: 16px;
	margin: 0 0 5px 0;
}

.example-one h2,
.example-two h2,
.example-three h2 {
	color: #21c677;
}

.example-four h2,
.example-five h2,
.example-six h2 {
	color: #9e21fe;
}

.example-three ul {
	overflow: hidden;
}

.example-three {
	width: 50%;
	float: left;
	margin: 0 0 2rem 0;
}

.new-item {
	max-height: 0;
	opacity: 0;
	transform: translateX(-300px);
	animation: openSpace 200ms ease forwards, moveIn 350ms 200ms ease forwards;
}
.remove-item {
	max-height: 50px;
	opacity: 1;
	animation: moveOut 350ms 200ms ease forwards, closeSpace 200ms ease forwards 350ms;
}

@keyframes openSpace {
	to {
		max-height: 50px;
	}
}

@keyframes moveIn {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes closeSpace {
	to {
		max-height: 0px;
	}

	from {
		max-height: 50px;
	}
}

@keyframes moveOut {
	to {
		opacity: 0;
		-webkit-transform: translateX(-300px);
		transform: translateX(-300px);
	}
}

.example-six .details {
	display: none;
	line-height: 1.4;
	padding-bottom: 10px;
}

#ex-six-button {
	position: relative;
	transition: transform 0.2s ease;
}

#ex-six-button.open {
	background: #a8ffd5;
	padding: 20px;
	transform:
		translateY(-60px) scale(2.8);
}

#example-six-list {
	transition: transform 0.2s ease;
}

#example-six-list.open {
	transform:
		translateY(-40px) scale(0.4);
}

#example-six-list.open .title {
	font-weight: bold;
	font-size: 120%;
}

.close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	font-weight: bold;
	color: black;
	text-decoration: none;
	font-size: 25px;
	line-height: 1;
	display: none;
}

#ex-six-button.open .close-button {
	display: block;
}
